<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>日历维护</title>
    <link rel="stylesheet" href="layoutRiLi/contextMenu.css" media="all">
	<link href="https://unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
    <style>
        .laydate-theme-molv .layui-laydate-main{width:1000px;}/*如果更改其他样式，也需要添加到这，否则其他样式将使用默认的width*/
        .layui-laydate-content table{ width:90%;height:500px;} /*日历的大小 */
        .laydate-calender-box{padding: 30px 50px;}
        .laydate-theme-grid .layui-laydate-content td>div{height:100%; font-size: xx-large;} /*日期字体大小 */
        .laydate-set-ym{font-size: xx-large;}
        .laydate-day-mark{font-size: xx-large; height: 100%; padding-top: 20px;} /*节日 文字大小*/
        .laydate-day-holidays:before { font-size: large; color: red;} /*日期左上角的假期标 显示的字体大小 */
        table th:nth-child(6){ background: #c5ff1c; }
        table th:nth-child(7){ background: #c5ff1c; }
        table td:nth-child(6) { color: red; }
        table td:nth-child(7) { color: red; }
        .laydate-theme-grid .laydate-month-list>li, .laydate-theme-grid .laydate-year-list>li, .laydate-theme-grid .layui-laydate-content td, .laydate-theme-grid .layui-laydate-content thead{border: 1px solid #1c0101;} /*表格的border*/
        .layui-laydate-content td {color: #0e8f60;}
        .layui-laydate-footer{color: red;}
    </style>
</head>
<body>

<script src="https://unpkg.com/layui@2.8.17/dist/layui.js"></script>
<div class="layui-inline laydate-calender-box">
    <div class="layui-input-inline" id="laydate-calender"></div>
</div>
</body>

<script th:inline="javascript">
    //var userDept = [[${session.loginDept}]];
    layui.extend({
        contextMenu: '{/}layoutRiLi/contextMenu'
    });
    layui.use(['jquery', 'contextMenu'], function () {
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var layer = layui.layer;

        var init_date = new Date().toISOString().slice(0, 10); // 返回格式：YYYY-MM-DDTHH:mm:ss.sssZ  再次截取返回格式：YYYY-MM-DD作为初始日期
        var year = '';// 年份
        var yearMonth = '';//年月作为请求后台的参数
        var mark = {};// 标注数据
        var holidays = [
                    ['2023-12-2', '2023-12-9', '2023-12-10', '2023-12-16', '2023-12-17', '2023-12-24', '2023-12-30', '2023-12-31'],//休息日，默认所有日期都是上班日，因此只需维护休息日即可
                    [] //默认所有日期都是上班日，因此不给默认上班日期
            ];

        loadCalender('#laydate-calender');// 主方法：加载laydate日历及标记数据
        function loadCalender(elem) {
            loadDateNoteData().then((res) => { // 返回值res就是 后台获取到的休息日
                holidays = [res, []];
                loadLayDate(elem); // 加载laydate日历
            }).catch((error) => {
                layer.msg('日历休假数据加载异常：'+ error, {icon: 5});
            });
        }

        async function loadDateNoteData() {
            if (init_date) {
                var array = init_date.split('-');
                year = array[0];
                yearMonth = year + '-' + array[1]; //年月作为查询的参数
            }
            mark = { // 标记日期数据
                '0-10-01': '举国同庆', //每年10-1
                '2024-2-09': '过年哦', '2024-2-10': '初一', '2024-2-11': '初二', '2024-2-12': '初三', '2024-2-13': '初四', '2024-2-14': '初五', '2024-2-15': '初六',
                '2099-10-14': '呵呵'
            };

            try {
                let res = await $.post('/query',  {yearMonth : yearMonth}); //await在这里等待post请求完成
                if(res.code == 0){
                    return res.data.holidays.split(',').map(item => yearMonth + '-' + item); // 遍历数组，并对每个日期添加年月拼接成日期
                } else {
                    layer.msg('日历休假信息获取失败！', {icon: 5});
                    return [];
                }
            } catch (error) {
                console.error('日历休假信息获取异常: ', error);
                return [];
            }
        }

        function loadLayDate(elem) {// 先移除原节点再重新添加，避免重复渲染
            let date_parent = $(elem).parent();
            $(elem).remove();
            date_parent.append('<div class="layui-input-inline" id="laydate-calender"></div>');
            laydate.render({ // 渲染日历
                elem: elem,
                weekStart: 1,// 设置周一为起始周
                position: 'static',// 展开面板
                calendar: true,// 显示传统节日
                btns: [],// 底部按钮
                theme: ['molv', 'grid'],// 格子主题
                mark: mark,// 自定义标注
                value: init_date,// 初始值
                holidays: holidays,// 节假日|加班
				min: 0, //已经过去的日期就不允许再改动了
                ready: function (date) {
                    initDateRightMenu("#laydate-calender");// 初始化右键菜单
					//$(".laydate-day-prev ").html(''); 隐藏上一个月份在当前月份中显示的日期
					//$(".laydate-day-next").html(''); 隐藏下一个月份在当前月份中显示的日期
					$(".layui-laydate-preview").css('font-size', 'large');
					$('.layui-laydate-footer').text('* 默认所有日期都是上班时间，因此只需维护休息日即可（休息日系统将停止定时调料）');
                },
                done: function (value, date, endDate) {// 选择后的回调
                    $(".ul-context-menu").hide();// 点击事件，隐藏右键菜单
                    switchYear(value);

                },
                change: function (value, date) {// 切换日期的回调
                    switchYear(value);
					//$(".laydate-day-prev ").html(''); 隐藏上一个月份在当前月份中显示的日期
					//$(".laydate-day-next").html(''); 隐藏下一个月份在当前月份中显示的日期
                }
            });
        }

        // 切换年份
        function switchYear(value) {
            new_year = value.split('-')[0];
            if (year !== new_year) {
                init_date = value;
                loadCalender('#laydate-calender');// 重新加载该年份的日历、标注数据
            }
        }

        // 给layui日历添加右键标注功能
        function initDateRightMenu(laydate_elem) {
            // 先移除原右键菜单再重新添加，避免重复渲染
            $(".ul-context-menu").remove();
            // 初始化菜单
            $(laydate_elem + " .layui-laydate-content td").contextMenu({
                width: 90, // width
                itemHeight: 30, // 菜单项height
                bgColor: "#fff", // 背景颜色
                color: "#777", // 字体颜色
                fontSize: 16, // 字体大小
                hoverBgColor: "#16baaa", // hover背景颜色
                hoverColor: "#fff", // hover背景颜色
                target: function (ele) { // 当前元素
                   let menu_box = $(".ul-context-menu");
                    let li_node = menu_box.children('li');
                    let type_class = ele.find("span").attr('class');
                    let date_type = 'normal';
                    let eleClass = ele[0].className; //当前元素的class
                    if(eleClass.includes('laydate-disabled')){//是laydate-disabled ，不允许有右键菜单
                        li_node.eq(0).hide();
                        li_node.eq(1).hide();
                        $('.ul-context-menu').hide();
                        layer.msg('无法变更历史日期', {time: 800,icon: 5});
                    }else{
                        $('.ul-context-menu').show();
						if (type_class && type_class.includes('laydate-day-holidays')) {//有自定义标签，且不是传统节日才能 显示右键删除功能
                            li_node.eq(0).hide();
                            li_node.eq(1).show();
                            if (type_class === "laydate-day-mark") {
                                date_type = 'note';
                            }
                            if (type_class === "laydate-day-holidays") {
                                date_type = 'rest';
                                if (ele.find("span").attr('type') === "work") {
                                    date_type = 'work';
                                }
                            }
                        } else {
                            li_node.eq(0).show();
                            li_node.eq(1).hide();
                        }
                    }

                    menu_box.attr("data-value", ele.attr("lay-ymd"));
                    menu_box.attr("data-type", date_type);
                },
                menu: [// 菜单项及回调
                     {
                        text: "休假",
                        icon: '<i class="layui-icon layui-icon-time" style="margin-right: -5px;"></i>',
                        callback: function (ele) {
                            init_date = ele.parent().attr("data-value");
                            console.log('选中日期：' + init_date);
                            sendNoteRequest('set').then((res) => { // 返回值res就是 后台获取到的休息日
                                if(res){
                                    holidays[0].push(init_date);
                                    loadLayDate(laydate_elem);
                                }
                            }).catch((error) => {
                                layer.msg('日历更新异常：'+ error, {icon: 5});
                            });
                        }
                    },
                    {
                        text: "移除",
                        icon: '<i class="layui-icon layui-icon-delete" style="margin-right: -5px;"></i>',
                        callback: function (ele) {
                            init_date = ele.parent().attr("data-value");
                            let date_type = ele.parent().attr("data-type");
                            sendNoteRequest('delete').then((res) => { // 返回值res就是 后台获取到的休息日
                                if(res){// 移除日期标记数据
                                    removeNote(date_type);
                                    loadLayDate(laydate_elem);
                                }
                            }).catch((error) => {
                                layer.msg('日历更新异常：'+ error, {icon: 5});
                            });
                        }
                    }
                ]
            });
        }

        // 移除日期标注
        function removeNote(type) {
            if (type === 'rest') {
                holidays[0] = holidays[0].filter(function (item) {
                    return item !== init_date
                });
            }
            if (type === 'work') {
                holidays[1] = holidays[1].filter(function (item) {
                    return item !== init_date
                });
            }
            if (type === 'note') {
                delete mark[init_date];
            }
        }

        async function sendNoteRequest(type) {  //标注请求方法
            let data = {'holiday': formatDateString(init_date), 'type': type}; // type：rest || delete ，要么是设置要么是删除
            try {
                let response = await $.post('/riliUpdate', data); //await在这里等待post请求完成
                if(response.code == 0){
                   layer.msg('更新成功', {icon: 1});
                   return 1;
                } else {
                    layer.msg(response.msg, {icon: 5});
                    return 0;
                }
            } catch (error) {
               layer.msg('更新异常！', {icon: 5});
               return 0;
            }
        }

        function formatDateString(dateString) {
          // 假设日期字符串的格式为 "YYYY-M"
          const [year, month, day] = dateString.split('-');
          // 检查月份是否为一位数，如果是则在前面添加0
          const formattedMonth = (month.length === 1) ? '0' + month : month;
          // 返回格式化后的日期字符串
          return `${year}-${formattedMonth}-${day}`;
        }
    });
</script>

